<template>
	<!-- 已经核销的界面(输入核销码) -->
	<view class="root">
		<view class="inputTop">
			<text>输入核销码:</text>
			<input type="text"/>
			<button>识别</button>
		</view>
		<view class="dataTop " >
			<view>
				<view>{{pageData.title}}</view>
				<view v-for="(value,index) in pageData.serviceText" class="secondData" >
					<view>{{value}}</view>
				</view>
				<view v-for="(value,index) in pageData.orderMsg"class="secondData">
					<view>{{value}}</view>
				</view>
			</view>
		</view>
		<view class="buttonBottom">
			<button @click="buttonDian">确认核销</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageData: {
					title: "核销码 MC-1234-5678-9012",
					serviceText: [
						"服务内容",
						"标准洗车服务包含",
						"整车泡沫冲洗擦干",
						"车内吸尘",
						"内饰脚垫简单除尘",
						"(不包含虫尸、水泥、沥青和顽固污渍等)"
					],
					orderMsg: [
						"订单信息",
						"订单价格: ￥30",
						"实付金额: ￥25",
						"优惠金额:￥5.00 ",
						"订单编号:2020003255465799",
						"支付时间:2020.03.30 14:40:45",
						"预约时间:2020.03.30 14:40"
					]
				},
				isMsg:false,
			}
		},
		methods: {
			buttonDian(){
				// this.isMsg=!this.isMsg;
				// console.log(this.isMsg);
				uni.showModal({
					title: '核对此订单',
					content: '请您仔细核对订单，此操作不可撤销，请谨慎操作！！！',
					showCancel: true,
					confirmText: '核销',
					cancelText: '取消',
					success: (res) => {
						if (res.confirm) {
							console.log('用户点击了确定');
							uni.redirectTo({
								url:"/pages/input_writeoff/inputed_writeoff/inputed_writeoff"
							})
						} else if (res.cancel) {
							console.log('用户点击了取消');
						}
					}
				});
			}
		}
	}
</script>

<style>
	.inputTop{
		padding-top: 20rpx;
		position: relative;
		height: 70rpx;
		margin-bottom: 30rpx;
	} 
	.inputTop text{
		line-height: 70rpx;
	} 
	.inputTop>input{
		width: 53%;
		float: right;
		margin-right: 180rpx;
		margin-top: 10rpx;
		border: 1px solid rgba(0, 0, 0, 0.3);
		border-radius: 10rpx;
	}
	.inputTop>button{
		font-size: 10rpx;
		width: 130rpx;
		height: 55rpx;
		position: absolute;
		top:30rpx;
		right: 0;
		background-color: blue;
		margin-right: 20rpx;
		color: white;
	}
	
	.root {
		height: 1246rpx;
		background-color: lightgrey;
		/* padding-top: 100rpx;*/
	}

	.dataTop {
		margin: 0 auto;
		width: 90%;
		height: 900rpx;
		border-radius: 30rpx;
/* 		padding-top: 100rpx; */
		background-color: white;
	}

	.dataTop>view>view:first-of-type {
		text-align: center;
		font-weight: 600;
		font-size: 35rpx;
		padding: 20rpx 0;
		margin-bottom: 20rpx;
		border-bottom: 1px solid rgba(0, 0, 0, 0.3);
	}

	.dataTop>view{
		border-radius: 30rpx;
	}

	.dataTop>view>view:nth-of-type(2)>view:first-of-type {
		font-size: 35rpx;
		font-weight: bold;
	}
	.dataTop>view>view:nth-of-type(8)>view:first-of-type {
		font-size: 35rpx;
		font-weight: bold;
	}

	/* .dataTop>view>view:nth-of-type(3)>view:first-of-type {
		font-weight: 600;
	} */
	

	.buttonBottom>button {
		margin-top: 100rpx;
		width: 70%;
		border-radius: 40rpx;
		background-color: blue;
		color: white;
	}
	.secondData{
		margin-left: 50rpx;
		line-height: 50rpx;
		
	}
	.active{
		background-color: darkgray;
	}
</style>